<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #161616;
        }

        ul,
        ol>li {
            list-style: none;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .logo {
            width: 138px;
            height: 50px;
        }

        header {
            height: 80px;
            background-color: white;
            opacity: 0.8;
            margin: auto;
            display: none;
            z-index: 10;
            position: fixed;
            width: 100%;

        }
        #list {
            /* position: absolute; */
            /* float: left; */
            top: 0;
            /* left: 50%; */
            width: 600px;
            margin: 0 auto;
            position: fixed;
            left: 50%;
        }

        #list>li {
            float: left;
            line-height: 80px;
            margin-right: 30px;
            color: #161616;
            cursor: pointer;
        }

        #list>li:hover {
            transition: all .3s;
            color: rgb(255, 50, 45);
        }

        #list>li:hover ul {
            display: block;
        }

        #list>li>ul {
            box-shadow: 1px 0px 3px 1px rgb(212, 211, 211);
            padding: 20px;
            position: absolute;
            display: none;
            top: 58px;
            background-color: white;
        }

        #fashion_ul {
            left: -20px;
        }

        #commodity_ul {
            left: 72px;
        }

        #enter_ul {
            left: 168px;
        }

        #list>li>ul>li {
            line-height: 30px;
        }

        #list a:hover {
            transition: all .3s;
            color: rgb(255, 50, 45);
        }

        .logo {
            width: 137px;
            height: 100%;
            margin-left: 5%;

        }

        .logo img {
                width: 100%;
            }
        /* //搜索 */
        .sitesearch {
            width: 20px;
            height: 20px;
            background-image: url(../../static/images/01-search.png);
            background-repeat: no-repeat;
            opacity: .5;
            position: absolute;
            top: 32px;
            left: 85%;
            cursor: pointer;
        }

        /* //搜索语言 */
        .language {
            position: absolute;
            left: 87%;
            top: 0;
            line-height: 80px;
            height: 80px;
            color: #969696;
        }

        .language a {
            color: #969696;
            font-size: 14px;
        }

        .goods_container {
            width: 1200px;
            height: 1000px;
            /* background-color: aqua; */
            margin: 0 auto;
        }

        .goods_container>div {
            width: 400px;
            height: 500px;
            /* background-color: pink; */
            /* border: 1px solid gray; */
            float: left;
        }

        .goods_img {
            width: 400px;
            height: 400px;
            /* background-color: hotpink; */
        }

        .goods_img>img {
            width: 90%;
            height: 90%;
            margin: 0 auto;
        }

        .goods_title {
            width: 380px;
            height: 20px;
            /* background-color: khaki; */
            text-align: center;
        }

        .goods_price {
            width: 380px;
            height: 50px;
            /* background-color: olivedrab; */
            text-align: center;
        }

        .goods_container a {
            color: black;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <img src="http://www.handu.com/uploadfile/2020/1106/20201106115623920.png" alt="">
        </div>
        <ul id="list">
            <li id="fashion">时尚动态
                <ul id="fashion_ul">
                    <li><a href="http://www.handu.com/html/news/newsinto1/">全智贤再次代言韩都</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">IU司职韩都时尚总监</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">时尚王推韩都联名款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">奇妙灵兽节韩都出新</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto4/">联名姜乐音推街头风</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto5/">跨界芭莎亮相时装周</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto6/">举办韩国设计师大赛</a></li>
                </ul>
            </li>
            <li id="commodity">商品发布
                <ul id="commodity_ul">
                    <li><a href="./goods.html">当季新品</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">明星同款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">设计师款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">IP合作款</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto4/">时尚休闲</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto5/">都市通勤</a></li>
                </ul>
            </li>
            <li id="enter">走进韩都
                <ul id="enter_ul">
                    <li><a href="http://www.handu.com/html/news/newsinto1/">品牌故事</a></li>
                    <li><a href="http://www.handu.com/html/news/iu/">无穷花开</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto2/">加入韩都</a></li>
                    <li><a href="http://www.handu.com/html/news/newsinto3/">会员福利</a></li>
                </ul>
            </li>
            <li id="flagship">
                <a href="https://handuyishe.tmall.com/">官方旗舰店</a>
            </li>
            <li id="flagship">
                <a href="../html/login.html">登录</a>
            </li>
        </ul>
        <a href="./search.html" class="sitesearch"></a>
        <div class="language">
            <a href="http://www.handu.com/html/search/">中文</a>
            "|"
            <a href="http://en.handu.com/">EN</a>
        </div>
        <h2>
            <span class="c1"></span>
            <span class="c2"></span>
        </h2>
    </header>
    <div class="goods_container">
        <div>
            <a href="">
                <div class="goods_img">
                    <img src="" alt="">
                </div>
                <p class="goods_title">

                </p>
                <p class="goods_price">

                </p>
            </a>
        </div>

    </div>

    <script src="../../static/libs/jQuery.js"></script>
    <script src="../javascripts/goods.js"></script>

</body>

</html>